<div class="layui-form" lay-filter="layuiadmin-form-tags" id="layuiadmin-app-form-tags">
  <div class="speed-progress" id="speed-progress-1" style="display: none;">
  	<div class="speed-progress-1">
  		<div class="div1">1</div>
  		<p>已支付，待发货</p>
  		<p id="pay_at"></p>
  	</div>
  	<div class="speed-progress-2" style="width: 150px;"></div>
  	<div class="speed-progress-1" style="margin-left: 20px;">
  		<div class="div1" id="ppx1">2</div>
  		<p>已发货</p>
  		<p id="send_at"></p>
  	</div>
  	<div class="speed-progress-2" style="width: 150px;left: 270px;"></div>
  	<div class="speed-progress-1" style="margin-left: 50px;">
  		<div class="div1" id="ppx2">3</div>
  		<p>订单完成</p>
  		<p id="done_at"></p>
  	</div>
  </div>
  <div class="speed-progress" id="speed-progress-2" style="display: none;">
  	<div class="speed-progress-1">
  		<div class="div1">1</div>
  		<p>已支付，待发货</p>
  		<p id="created_at1"></p>
  	</div>
  	<div class="speed-progress-2"></div>
  	<div class="speed-progress-1" style="margin-left: 122px;">
  		<div class="div1" id="ppx4">2</div>
  		<p>用户取消订单</p>
  		<p id="cancel_at"></p>
  	</div>
  </div>
  <blockquote class="layui-elem-quote">订单信息</blockquote>
  <ul class="order-base-info">
  	<li>
  		<div class="order-base-info-1 order-base-info-2">
  			<p>订单号：<span id="no1"></span></p>
  			<p>付款方式：<span id="pay_type1"></span></p>
  			<div class="order-base-info-3">
  				<span>买家:</span>
  				<img id="user_avatar1" src="" alt="" />
  				<span id="user_nickname"></span>
  			</div>
  		</div>
  		<div class="order-base-info-1" style="border-right: 1px solid #ccc;">
  			<p style="padding-top: 10px;">收货地址：</p>
  			<p><span id="address_receiver" style="margin-right: 20px;"></span><span id="address_mobile"></span></p>
  			<p><span id="address_province_name"></span><span id="address_city_name"></span><span id="address_area_name"></span><span id="address"></span></p>
  		</div>
  	</li>
  	<li style="display: none;" id="div3">
  		<h3>订单状态：买家已付款，等待平台发货</h3>
  		<button class="layui-btn layuiadmin-btn-useradmin layui-btn-1" id="detection">预约发货</button>
  		<button class="layui-btn layuiadmin-btn-useradmin layui-btn-1" id="detection1">主动退款，取消订单</button>
  	</li>
  	<li style="display: none;" id="div4">
  		<h3>订单状态：平台已发货，等待买家收货</h3>
  		<p class="p1">物流信息：<span id="express_delivery_id1" style="margin-right: 10px;"></span><span id="express_no1"></span></p>
  		<div class="logistics" id="logistics">
  			<p>物流进度：<span id="logistics_d" style="display: none;">待揽件</span></p>
  		</div>
  	</li>
  	<li style="display: none;" id="div5">
  		<h3>订单状态：订单完成，系统已自动确认收货</h3>
  		<h3>订单状态：平台已发货，等待买家收货</h3>
  		<p class="p1">物流信息：<span id="express_delivery_id2" style="margin-right: 10px;"></span><span id="express_no2"></span></p>
  		<div class="logistics" id="logistics1">
  			<p>物流进度：已签收</p>
  		</div>
  	</li>
  	<li style="display: none;" id="div6">
  		<h3>订单状态：用户已取消订单，已自动退款</h3>
  	</li>
  </ul>
  <blockquote class="layui-elem-quote">购买的书</blockquote>
  <div class="table-base">
    <table id="LAY-good-list-status1" lay-filter="LAY-good-list-status1"></table>
  </div>
  <div class="price-all">
  	<p>共：<span id="amount1"></span>本</p>
  	<p>总价格：¥<span id="book_price"></span></p>
  	<p style="display:none" id="px1">余额支付：-¥<span id="account_decr_price"></span></p>
  	<p style="display:none" id="px2">使用红包：-¥<span id="coupon_decr_price"></span></p>
  	<p>运费：+¥<span id="fee_price"></span></p>
  	<p>------------------</p>
  	<p>实际支付：¥<span id="price"></span></p>
  </div>
  <script type="text/html" id="LAY-good-list-table-stock5">
    <img src="{{d.book_image}}" alt="" style="width:83px; height: 110px">
  </script>
  <script type="text/html" id="LAY-good-list-table-stock6">
    <p>￥{{d.price}}</p>
  </script>
  <script type="text/html" id="LAY-good-list-old-price">
    <p>￥{{d.book_old_price}}</p>
  </script>
  <script type="text/html" id="LAY-good-list-table-stock8">
    <p>{{parseInt(d.type) ==1? '全新书':parseInt(d.type) ==2? '品相良好':parseInt(d.type) ==3? '轻度污渍或磨损':parseInt(d.type) ==4? '轻度破损或磨损':parseInt(d.type) ==5? '轻度变形或折痕':parseInt(d.type) ==6? '可拆外封套缺失':parseInt(d.type) ==7? '少量划线或标注':'轻度泛黄或褪色'}}</p>
  </script>
  <script type="text/html" id="LAY-good-list-table-stock7">
		  <ul>
		  {{#  layui.each(d.book_categories, function(index, item){ }}
		    <li>
		      <span>{{ item.title }}</span>
		    </li>
		  {{#  }); }}
		  {{#  if(d.book_categories.length === 0){ }}

		  {{#  } }}
		  </ul>
	  </script>
</div>
<style type="text/css">
.speed-progress{width: 100%;height: 156px;clear: both;position: relative;margin: 0 auto;}
.speed-progress .speed-progress-1{width: 150px;overflow: auto;float: left;}
.speed-progress .speed-progress-1 .div1{width: 50px;color: #fff;margin:0 auto;height: 50px; border-radius: 50%;background: yellowgreen;text-align: center;line-height: 50px;margin-bottom: 10px;}
.speed-progress .speed-progress-1 p{margin-bottom: 10px; text-align: center;}
.speed-progress .speed-progress-2{width: 252px;border-bottom: 1px solid yellowgreen;height: 1px;position: absolute;left: 70px;top: 24px;}
.speed-progress .speed-progress-3{left: 350px;}
.active{background: #ccc !important;}
.order-base-info{width: 95%;overflow: auto;padding: 30px;}
.order-base-info li{float: left;width: 40%;height: 260px;}
.order-base-info li h3{margin: 44px 0 20px 50px;font-weight: bold;}
.order-base-info li .p1{margin: 10px 0 10px 50px;color: green;}
.order-base-info li .layui-btn-1{margin-left: 54px;}
.order-base-info li .order-base-info-1{width: 100%;height: 130px;}
.order-base-info li .order-base-info-1 p{margin-bottom: 10px;}
.order-base-info li .order-base-info-2{border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;}
.order-base-info li .order-base-info-3{width: auto; height: 60px;line-height: 60px;clear: both;}
.order-base-info li .order-base-info-3 span{float: left;}
.order-base-info li .order-base-info-3 img{width: 60px;height: 60px;border-radius: 50%;display: block;float: left;margin: 0 10px;}
.table-base{width: 100%;max-height: 600px;overflow: auto;margin-bottom: 20px;}
table{width: 100%;text-align: center;}
.price-all{width: 96%;margin: 0 auto;overflow: auto;text-align: right;line-height: 30px;}
.logistics{
	width: 100%;
	border: 1px solid #ccc;
	max-height: 130px;
	height: 130px;
	overflow: auto;
	margin-left: 54px;
  padding: 5px;
}
</style>
